<template>
	<div>
		<div style="width: 90%;padding: 2rem 5% 1rem 5%;">
			<div style="display: flex;align-items: center;justify-content: space-between;">
				<div style="display: flex;align-items: center;">
					<div>
						<img :src="APIDomainName + review.avatar"
							style="border-radius: 50%;width: 4rem;height: 4rem;"></img>
					</div>
					<div style="margin-left: 1rem;">
						<div style="display: flex;">
							<div style="margin-right: 0.3rem;font-size: 18px;">{{review.name}}</div>
						</div>
						<div style="color: #ccc;margin-top: 0.5rem;">
							{{shelfTime(review.date)}}
							</span>
						</div>
					</div>
				</div>
				<van-rate
				  v-model="review.value"
				  :size="25"
				  color="#14C5CD"
				  void-icon="star"
				  void-color="#eee"
				/>
			</div>
			<div style="background-color: #D2D7D9;height: 0.05rem;margin-top: 0.5rem;"></div>
			<div style="margin:0.5rem 0 1rem 0;">{{review.detail}}</div>
			<div style="background-color: #F5F7F8;padding: 1rem;border-radius: 10px;margin-top: 1rem;">
				<van-row type="flex" align="center">
					<van-col span="5">
						<van-image width="30%" :src="APIDomainName + review.pic" radius="20px"
							style="width: 5rem;height: 5rem;"></van-image>
					</van-col>
					<van-col span="5">
						<div style="font-size: 16px;font-weight: bold;">
							{{review.title}}
						</div>
						<div style="font-size: 14px;margin-top: 0.3rem;">{{review.labelone}}·{{review.labeltwo}} </div>
						<div style="color:#01CBE2;font-size: 14px;margin-top: 0.3rem;"
							@click="onForum(review.playgame_id)">
							前往论坛 >
						</div>
					</van-col>
					<van-col span="6" offset="8">
						<van-button round @click="onDetail(review.playgame_id)"
							style="background-color: #14C5CD; color: #ffffff;font-size: 16px;border: 0;height: 2.5rem;">
							查看详情
						</van-button>
					</van-col>
				</van-row>
			</div>
			<div style="font-size: 18px; margin-top: 1rem;">回复</div>
			<van-row style="margin-top: 1rem;" type="flex" align="center">
				<van-col span="3">
					<van-image width="100%" :src="APIDomainName + avatar" radius="50%"
						style="width: 4rem;height: 4rem;"></van-image>
				</van-col>
				<van-col span="20" offset="">
					<div
						style="border-radius: 30px;width: 95%;background-color: #F5F7F8;padding: 1rem;margin-left: 1rem;">
						<input type="text" v-model="detail" placeholder="添加回复"
							style="margin-left: 1rem;background-color: #F5F7F8;border: 0;width: 90%;">
					</div>
				</van-col>
			</van-row>
			<van-button
				style="margin-left: 85%;background-color: #14C5CD; color: #ffffff;width: 15%;font-weight: bold;font-size: 18px;border: 0;margin-top: 1rem;border-radius: 10px;height: 2.5rem;"
				@click="onPublish()">
				发布
			</van-button>
			<div v-if="ReviewreviewList==0" style="color: #ccc;font-size: 18px;text-align: center;margin-top: 3rem;">
				<div style="background-color: #EBEFF0;height: 0.05rem;margin-bottom: 1rem;"></div>
				快来发布第一个回复吧
			</div>
			<div v-for="(item,i) in ReviewreviewList" :key="i" v-else>
				<div style="background-color: #EBEFF0;height: 0.05rem;margin-top: 1rem;"></div>
				<van-row style="margin-top: 1rem;" type="flex" align="flex-start">
					<van-col span="4">
						<van-image width="100%" :src="APIDomainName + item.avatar" radius="50%"
							style="width: 4rem;height: 4rem;"></van-image>
					</van-col>
					<van-col span="18">
						<div style="font-weight: bold;margin-right: 0.3rem;font-size: 18px;color: #878C92;">
							{{item.name}}
						</div>
						<div style="margin-top: 0.5rem;">
							{{item.detail}}
						</div>
					</van-col>
					<van-col span="2">
						<img style="width: 3rem;" src="@/assets/sign.png"
							@click="showPopup(item.id,item.user_id)"></img>
					</van-col>
				</van-row>
			</div>
		</div>
		<van-popup v-model="show" round position="bottom">
			<div style="background-color: #EBEFF0;width: 15%;height: 0.5rem;border-radius: 20px;margin: 1rem auto 0;">
			</div>
			<div @click="deleteReview()" v-show="user_id==user.id"
				style="display: flex;align-items: center;margin-top: 1rem;margin-left: 2rem;">
				<van-icon name="delete-o" size="30" />
				<div style="margin-left: 1rem;font-size: 18px;">删除</div>

			</div>
			<div style="display: flex;align-items: center;margin-top: 1rem;margin-left: 2rem;" @click="updateReview()"
				v-show="user_id==user.id">
				<van-icon name="edit" size="30" />
				<div style="margin-left: 1rem;font-size: 18px;">修改</div>
			</div>
			<div style="display: flex;align-items: center;margin-top: 1rem;margin-left: 2rem;margin-bottom: 1rem;">
				<van-icon name="share-o" size="30" />
				<div style="margin-left: 1rem;font-size: 18px;" @click="onShare()">分享</div>
			</div>
			<van-button block @click="hiddenPopup()"
				style="background-color: #F8F8F8; color: #666666;width: 90%;margin: 0 auto 1rem; font-size: 18px;margin-top: 1rem;border-radius: 10px;">
				取消
			</van-button>
		</van-popup>
		<van-popup v-model="update" style="width: 80%;border-radius: 10px;">
			<div
				style="background-color: #14C5CD;height: 2.5rem;padding: 1rem 0 0 1rem;color: #ffffff;font-size: 18px;">
				{{user.name}}
			</div>
			<van-field v-model="remark" rows="5" autosize type="textarea" placeholder="写下你的想法" />
			<div style="background-color: #D2D7D9;height: 0.05rem;margin-top: 0.5rem;"></div>
			<div
				style="width: 95%;display: flex;align-items: center;justify-content: space-between;margin-bottom: 1rem;">
				<van-button
					style="margin-left: 65%;background-color: #fff; color: #14C5CD;width: 15%;border-color: #14C5CD;margin-top: 1rem;border-radius: 10px;height: 2.5rem;"
					@click="hidden()">
					取消
				</van-button>
				<van-button
					style="background-color: #14C5CD; color: #ffffff;width: 15%;border: 0;margin-top: 1rem;border-radius: 10px;height: 2.5rem;"
					@click="onRelease()">
					发表
				</van-button>
			</div>
		</van-popup>
	</div>
</template>

<script>
	import {
		getforwardAPI,
		getReviewReviewAPI,
		getPublishReviewAPI,
		deleteReviewReviewAPI,
		updateReviewReviewAPI,
		updatereviewreviewdetailAPI
	} from "@/api/product.js";

	import * as Tools from "@/utils/tools.js"
	import {
		getUserLocal,
	} from "@/utils/auth.js"
	import {
		getDetailByIdAPI
	} from "@/api/user.js";
	export default {
		data() {
			return {
				avatar: '',
				user: {},
				review: {},
				detail: '',
				ReviewreviewList: [],
				show: false,
				update: false,
				id: '',
				user_id: '',
				remark: '',
			}
		},
		methods: {
			shelfTime(i) {
				let date = new Date(i);
				// console.log(date instanceof Date);
				return Tools.dateFormat(date, "yyyy年MM月dd日");
			},
			onDetail(id) {
				this.$router.push({
					name: 'productDetail',
					params: {
						id
					},
				});
			},
			onForum(id) {
				this.$router.push({
					name: 'forumDetail',
					params: {
						id
					},
				});
			},
			onPublish() {
				let params = {
					id: this.$route.params.id,
					detail: this.detail,
					avatar: this.avatar,
				};
				getPublishReviewAPI(params).then((result) => {
					// this.$toast(result.msg);
					this.getReviewReview();
				});
				this.detail='';
			},
			getReviewReview() {
				let id = this.$route.params.id;
				getReviewReviewAPI(id).then(result => {
					this.ReviewreviewList = result.data;
					console.log(result.data)
				}).catch(() => {});
			},
			onShare() {
				this.$toast("分享成功");
				this.show = false;
			},
			deleteReview() {
				this.show = false;
				this.$dialog.confirm({
					title: "提示",
					message: "确认删除此回复吗",
				}).then(() => {
					let ids = this.id;
					deleteReviewReviewAPI(ids).then((result) => {
						this.getReviewReview();
						this.$toast(result.msg);
					});
				}).catch(() => {

				});
			},
			showPopup(id, user_id) {
				this.show = true;
				this.id = id;
				this.user_id = user_id;
			},
			updateReview() {
				let id = this.id;
				updatereviewreviewdetailAPI(id).then(result => {
					this.remark = result.data.detail;
					console.log(result)
				}).catch(() => {});
				this.show = false;
				this.update = true;
			},
			onRelease(){
				let params={
					id:this.id,
					detail:this.remark
				}
				updateReviewReviewAPI(params).then(result=>{
					this.$toast(result.msg)
					this.getReviewReview();
				}).catch(() => {});
				this.update = false;
			},
			hiddenPopup() {
				this.show = false;
			},
			hidden() {
				this.update = false;
			},
		},
		created() {
			let id = this.$route.params.id;
			getforwardAPI(id).then(result => {
				this.review = result.data;
				console.log(result)
				// this.$route.meta.title = this.review.title + "的评价"
			}).catch(() => {});
			this.getReviewReview();
		},
		mounted() {
			//初始页面数据
			this.user = getUserLocal();
			getDetailByIdAPI(this.user.id).then(result => {
				this.avatar = result.data.avatar;
			}).catch(() => {});
		}
	}
</script>

<style>
	.van-field {
		font-size: 18px;
	}
</style>
